<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useUserState, type typeUserInfo } from '@/store/userState'
import * as video from '@/apis/video'

const userState = useUserState()
const userInfo = ref<any>()
onMounted(async () => {
  userInfo.value = await userState.getUserInfo()
})

function checkRes(e: any): boolean {
  if (e.code != 200) {
    ElMessage(e.msg)
    return false
  }
  return true
}

const editUserName = ref(false)
const newUserName = ref('')
function editUserName_() {
  if (newUserName.value.length < 2) {
    ElMessage('账户名不得低于俩位，请检查')
    return
  }
  video.editUserInfo(newUserName.value).then(res => {
    editUserName.value = false
    if (checkRes(res.data)) {
      window.location.reload()
    }
  })
}

const editUserPassword = ref(0)
const itpassword = ref('')
const newPassword = ref('')
async function editPassword_() {
  if (editUserPassword.value == 1) {
    if (itpassword.value.length < 8) {
      ElMessage('密码不得低于8位，请检查')
      return
    }
    let pass = false
    try {
      let data = (await video.checkPassword(itpassword.value)).data
      if (data.code == 200) {
        pass = true
      }
    } catch (error) {
      //
    }
    if (pass) editUserPassword.value = 2
    else ElMessage('请输入正确的密码')
    return
  }
  if (newPassword.value.length < 8) {
    ElMessage('新密码不得低于8位，请检查')
    return
  }
  if (newPassword.value == itpassword.value) {
    ElMessage('新密码不得与旧密码相同')
    return
  }
  video.editUserInfo(undefined, itpassword.value, newPassword.value).then(res => {
    editUserName.value = false
    if (checkRes(res.data)) {
      window.location.reload()
    }
  })
}

function tipIcon() {
  ElMessage('由于服务器为个人服务器，防止滥用导致个人无法承担费用，所以暂不支持自定义头像')
}
</script>

<template>
  <div class="box">
    <h2>个人资料</h2>
    <div style="height: 30px"></div>
    <div class="item">
      <div class="item-left">头像</div>
      <div class="item-right">
        <el-avatar class="icon" :size="50" :src="userInfo?.avatarUrl" />
      </div>
      <div class="item-ctr" @click="tipIcon">修改</div>
    </div>
    <div class="item">
      <div class="item-left">昵称</div>
      <div v-if="!editUserName" class="item-right">{{ userInfo?.username }}</div>
      <div v-else class="item-right"><el-input v-model="newUserName" placeholder="请输入新账户名" /></div>
      <div v-if="!editUserName" class="item-ctr" @click="editUserName = true">修改</div>
      <div v-else style="display: flex; padding-right: 40px">
        <div class="item-ctr" style="margin: 0 40px" @click="editUserName = false">取消</div>
        <div class="item-ctr" @click="editUserName_">确认</div>
      </div>
    </div>
    <div class="item">
      <div class="item-left">密码</div>
      <div v-if="editUserPassword == 0" class="item-right">登录时需要输入的密码</div>
      <div v-else-if="editUserPassword == 1" class="item-right"><el-input v-model="itpassword" placeholder="请输入当前的账户密码" /></div>
      <div v-else-if="editUserPassword == 2" class="item-right"><el-input v-model="newPassword" placeholder="请输入确认密码" /></div>
      <div v-if="!editUserPassword" class="item-ctr" @click="editUserPassword = 1">修改</div>
      <div v-else style="display: flex; padding-right: 40px">
        <div class="item-ctr" style="margin: 0 20px" @click="editUserPassword = 0">取消</div>
        <div class="item-ctr" @click="editPassword_">{{ editUserPassword == 1 ? '下一步' : '确认' }}</div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="less">
.el-input {
  // --el-input-border-color:rgba(0,0,0,0);
  --el-input-focus-border-color: rgba(1, 206, 205, 1);
  // --el-input-hover-border-color:rgba(0,0,0,0);
}
.item {
  display: flex;
  align-items: center;
  height: 80px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);

  &-left {
    flex-shrink: 0;
    width: 150px;
  }

  &-right {
    width: 100%;
    color: #888;
    font-size: 15px;
  }
  &-ctr {
    flex-shrink: 0;
    cursor: pointer;
    color: rgba(1, 206, 205, 1);
  }
}
.box {
  background: rgb(30, 30, 36);
  width: 100%;
  border-radius: 5px;
  padding: 20px;
}
</style>
